<template>
  <div class="question-list">
    <div class="library-grid">
      <!-- 创建题库卡片 -->
      <div class="library-card create-card" @click="handleCreateLibrary">
        <el-icon class="plus-icon"><Plus /></el-icon>
        <div class="card-text">创建题库</div>
      </div>
      <QuestionCard 
        v-for="library in libraries" 
        :key="library.id" 
        :id="library.id" 
        :name="library.name" 
        :count="library.questionCount"
        :subjectId="route.query.subjectId"
        :subjectName="route.query.subjectName"
        @refresh="getLibraries"
      />
    </div>

    <!-- 创建题库对话框 -->
    <el-dialog
      v-model="dialogVisible"
      title="创建新题库"
      width="30%"
    >
      <el-form 
        :model="newLibrary" 
        ref="newLibraryFormRef"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="题库名称" prop="name">
          <el-input 
            v-model="newLibrary.name" 
            placeholder="请输入题库名称"
            maxlength="50"
            show-word-limit
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="createLibraryBySubject" @keyup.enter="createLibraryBySubject">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { Plus, Document } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import QuestionCard from '@/components/question/QuestionCard.vue'
import { createLibrary, getLibrariesBySubject} from '@/api/library'
import { useRoute } from 'vue-router'
const route = useRoute()

// 创建题库对话框
const dialogVisible = ref(false)
const newLibraryFormRef = ref(null)
const newLibrary = reactive({
  name: ''
})

// 表单验证规则
const rules = {
  name: [
    { required: true, message: '请输入题库名称', trigger: 'blur' },
    { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
  ]
}

// 题库列表数据
const libraries = ref([])

// 获取题库列表
const getLibraries = async () => {
  try {
    const response = await getLibrariesBySubject(route.query.subjectId, 1, 100)
    
    if (response.code === 200) {
      libraries.value = response.data.list
    } else {
      ElMessage.error(response.message || '获取题库列表失败')
    }
  } catch (error) {
    ElMessage.error('获取题库列表失败：' + error.message)
  }
}

onMounted(() => {
  getLibraries()
})  

// 处理创建题库
const handleCreateLibrary = () => {
  newLibrary.name = ''
  dialogVisible.value = true
}

// 创建题库
const createLibraryBySubject = async () => {
  if (!newLibraryFormRef.value) return

  await newLibraryFormRef.value.validate(async (valid) => {
    if (valid) {
      try {
        const user = JSON.parse(localStorage.getItem('user'))
        const response = await createLibrary(user.id, route.query.subjectId, newLibrary.name, "")

        if (response.code === 200) {
          ElMessage.success('创建题库成功')
          dialogVisible.value = false
          getLibraries() // 刷新题库列表
        } else {
          ElMessage.error(response.message || '创建题库失败')
        }
      } catch (error) {
        ElMessage.error('创建题库失败：' + error.message)
      }
    }
  })
}

// 处理题库点击
const handleLibraryClick = (libraryId) => {
  // TODO: 实现跳转到题库详情页的逻辑
  console.log('跳转到题库:', libraryId)
}
</script>

<style scoped>
.question-list {
  padding: 20px;
  background: #fff;
  min-height: calc(100vh - 100px);
}

.library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  padding: 10px;
}

.library-card {
  width: 150px;
  height: 180px;
  background: #f8f9fa;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.create-card {
  border: 2px dashed #dcdfe6;
  background: #fff;
}

.create-card:hover {
  border-color: #409eff;
  color: #409eff;
}

.plus-icon {
  font-size: 32px;
  color: #909399;
  margin-bottom: 8px;
}

.card-text {
  color: #909399;
  font-size: 14px;
}

.library-icon {
  font-size: 40px;
  color: #67c23a;
  margin-bottom: 16px;
}

.library-info {
  text-align: center;
}

.library-title {
  font-size: 16px;
  color: #303133;
  margin-bottom: 8px;
}

.question-count {
  font-size: 14px;
  color: #909399;
}

.library-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
</style> 